<template>
  <div class="menu">
    <div class="menu-left">
      <van-sidebar class="sidebar" v-model="activeKey" @change="onChange">
        <van-sidebar-item
          v-for="item in leftMenuList"
          :key="item"
          :title="item"
        />
      </van-sidebar>
    </div>
    <div class="menu-right">
      <ul>
        <li class="cate" v-for="(menu, index1) in rightContent" :key="index1">
          <h4 class="cate-title">{{ menu.cat_name }}</h4>
          <ul class="cate-item">
            <li v-for="(item, index2) in menu.children" :key="index2">
              <router-link
                class="cate-item-wrapper"
                :to="{
                  name: 'goods_list',
                  params: { category_id: item.cat_id },
                }"
              >
                <div class="cate-item-img">
                  <img :src="item.cat_icon" alt="" />
                </div>
                <span>{{ item.cat_name }}</span>
              </router-link>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import BScroll from "better-scroll";
import { request1 } from "../network/request";
export default {
  data() {
    return {
      activeKey: 0,
      leftMenuList: null,
      rightContent: null,
      Cates: null,
    };
  },
  created() {
    request1({
      url: "/categories",
    }).then((res) => {
      this.Cates = res.message;
      //左侧数据
      this.leftMenuList = this.Cates.map((v) => v.cat_name);
      //右侧数据
      this.rightContent = this.Cates[0].children;
    });
  },
  methods: {
    onChange(index) {
      this.rightContent = this.Cates[index].children;
    },
    _initBScroll() {
      this.leftBscroll = new BScroll(".menu-left", {
        click: true,
        mouseWheel: true,
      });
      this.rightBscroll = new BScroll(".menu-right", {
        click: true,
        mouseWheel: true,
      });
    },
  },
  watch: {
    rightContent() {
      // $nextTick用来在下次DOM更新循环结束之后执行延迟回调
      this.$nextTick(() => {
        this._initBScroll(); // 初始化better-scroll
      });
    },
    leftMenuList() {
      // $nextTick用来在下次DOM更新循环结束之后执行延迟回调
      this.$nextTick(() => {
        this._initBScroll(); // 初始化better-scroll
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.menu {
  display: flex;
  position: absolute;
  text-align: center;
  top: 0px;
  bottom: 50px;
  width: 100%;
  overflow: hidden;
  .menu-right {
    .cate {
      height: 100%;
      .cate-title {
        margin: 0;
        text-align: center;
        font-size: 14px;
        color: #333;
        font-weight: bold;
        padding: 10px;
      }
      .cate-item {
        padding: 7px 10px 10px;
        display: flex;
        overflow: hidden;
        flex-flow: row wrap;
        li {
          width: 33.3%;
          .cate-item-wrapper {
            .cate-item-img {
              width: 100%;
              img {
                width: 70px;
                height: 70px;
              }
            }
            span {
              display: inline-block;
              font-size: 14px;
              color: #333;
              min-width: 70px;
            }
          }
        }
      }
    }
  }
}
.grid {
  width: 75vw;
}
.sidebar {
  width: 25vw;
}
</style>
